<template>
  <view class="container">
    <!-- 物品信息展示 -->
    <view class="item-detail">
      <view class="detail-item"><text class="label">物品ID：</text>{{ item.itemId }}</view>
      <view class="detail-item"><text class="label">物品名称：</text>{{ item.itemName }}</view>
      <view class="detail-item"><text class="label">物品编号：</text>{{ item.itemCode }}</view>
      <view class="detail-item"><text class="label">类别：</text>{{ item.itemCategory }}</view>
      <view class="detail-item"><text class="label">规格：</text>{{ item.specification }}</view>
      <view class="detail-item"><text class="label">单位：</text>{{ item.unit }}</view>
      <view class="detail-item"><text class="label">库存：</text>{{ item.stockQuantity }}</view>
      <!-- <view class="detail-item"><text class="label">最低库存：</text>{{ item.minStock }}</view> -->
      <view class="detail-item"><text class="label">存放位置：</text>{{ item.storageLocation }}</view>
      <view class="detail-item"><text class="label">描述：</text>{{ item.description }}</view>
    </view>

    <!-- 审批操作 -->
    <view class="action-section">
      <textarea v-model="rejectReason" placeholder="请输入拒绝理由（如有）" class="textarea" />
      <button class="approve-btn" @tap="approve">同意</button>
      <button class="reject-btn" @tap="reject">拒绝</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      usageId: '',
      itemId: '',
      item: {},
      rejectReason: ''
    };
  },
  onLoad(options) {
    this.usageId = options.usageId;
    this.itemId = options.itemId;
    this.getItemInfo();
  },
  methods: {
    async getItemInfo() {
      try {
        const res = await uni.request({
          url: this.$baseUrl + `/item/getItemById?itemId=${this.itemId}`,
          method: 'GET',
          header: {
            'satoken': uni.getStorageSync('token')
          }
        });
        if (res.data.code === 200) {
          this.item = res.data.data;
        } else {
          uni.showToast({ title: res.data.message || '获取物品信息失败', icon: 'none' });
        }
      } catch (error) {
        uni.showToast({ title: '请求失败', icon: 'none' });
      }
    },
  
    async approve() {
        try {
          const res = await uni.request({
            url: this.$baseUrl + `/item/approveRequest?id=${this.usageId}`,
            method: 'POST',
            header: {
              'satoken': uni.getStorageSync('token')
            }
          });
          if (res.data.code === 200) {
            uni.showToast({ title: '审批通过', icon: 'success' });
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/items/RequestList'
              });
            }, 1500);
          } else {
            uni.showToast({ title: res.data.message || '审批失败', icon: 'none' });
          }
        } catch (error) {
          uni.showToast({ title: '请求失败', icon: 'none' });
        }
      },
    
      async reject() {
        if (!this.rejectReason.trim()) {
          uni.showToast({ title: '请填写拒绝理由', icon: 'none' });
          return;
        }
        try {
          const res = await uni.request({
            url: this.$baseUrl + `/item/rejectRequest?id=${this.usageId}&reason=${encodeURIComponent(this.rejectReason)}`,
            method: 'POST',
            header: {
              'satoken': uni.getStorageSync('token')
            }
          });
          if (res.data.code === 200) {
            uni.showToast({ title: '已拒绝', icon: 'success' });
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/items/RequestList'
              });
            }, 1500);
          } else {
            uni.showToast({ title: res.data.message || '拒绝失败', icon: 'none' });
          }
        } catch (error) {
          uni.showToast({ title: '请求失败', icon: 'none' });
        }
      }
  
  }
};
</script>

<style lang="scss">
.container {
  padding: 30rpx;
}

.item-detail {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  margin-bottom: 30rpx;

  .detail-item {
    font-size: 28rpx;
    margin-bottom: 20rpx;

    .label {
      font-weight: bold;
      color: #333;
      margin-right: 10rpx;
    }
  }
}

.action-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .textarea {
    height: 160rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
  }

  .approve-btn, .reject-btn {
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    line-height: 88rpx;
    text-align: center;
  }

  .approve-btn {
    background-color: #4CAF50;
    color: white;
  }

  .reject-btn {
    background-color: #F44336;
    color: white;
  }
}
</style>
